<template>
  <!-- 大屏通用头部组件，直接引入即可 -->
  <div class="dataScreen-header">
    <decoration2
      :dur="3"
      :color="['#4092f7']"
      style="
        width: 550px;
        height: 5px;
        transform: rotate(180deg);
        position: absolute;
        left: 4.5%;
        top: 29px;
      " />
    <decoration2
      :dur="3"
      :color="['#4092f7']"
      style="
        width: 550px;
        height: 5px;
        position: absolute;
        right: 6%;
        top: 29px;
      " />
    <div class="header-lf f-l m-t10"></div>
    <div class="header-rg f-r m-t10"></div>
    <div class="header-ct">
      <div
        class="titleBox"
        :style="{ backgroundImage: 'url(' + titleImg + ')' }"></div>
      <div class="menuBox" v-if="menuItemsArr.length">
        <div class="menuStyle menuLeft" v-show="menuItemsArr[0].name">
          <!-- 左边 -->
          <div
            class="menuItem"
            v-for="(n, i) in leftMenuArr"
            :key="i"
            :class="n.name ? 'itemBord' : ''"
            @click="menuClick(n.path)">
            <span>{{ n.name }}</span>
          </div>
        </div>
        <div class="menuStyle menuRight">
          <!-- 右边 -->
          <div
            class="menuItem"
            v-for="(n, i) in rightMenuArr"
            :key="i"
            :class="n.name ? 'itemBord' : ''"
            @click="menuClick(n.path)">
            <span>{{ n.name }}</span>
          </div>
        </div>
      </div>
      <div class="dbStarBox">
        <img src="@/assets/screenImg/headImg/star.gif" alt="" />
        <img src="@/assets/screenImg/headImg/star.gif" alt="" />
      </div>
    </div>
    <div
      class="ctrBtn"
      v-if="router.currentRoute.value.path !== '/dashboard/home'">
      <img src="@/assets/screenImg/commonImg/home.png" @click="goHome" alt="" />
      <img src="@/assets/screenImg/commonImg/back.png" @click="goBack" alt="" />
    </div>
  </div>
</template>
<script setup name="screenCommonHeader">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Decoration2 } from "@kjgl77/datav-vue3";

const props = defineProps({
  // 需要显示菜单时传入
  menuItemsArr: {
    type: Array,
    required: false,
    default: [{ name: "", path: "" }],
  },
  // 页面大标题图片url
  titleImg: {
    required: true,
    default: "",
  },
});

const leftMenuArr = ref([]);
const rightMenuArr = ref([]);
const changeMenuArr = () => {
  if (props.menuItemsArr.length) {
    // 偶数个
    if (props.menuItemsArr.length % 2 == 0) {
      leftMenuArr.value = _.slice(
        props.menuItemsArr,
        0,
        props.menuItemsArr.length / 2
      );
      rightMenuArr.value = _.slice(
        props.menuItemsArr,
        props.menuItemsArr.length / 2,
        props.menuItemsArr.length
      );
    } else {
      leftMenuArr.value = props.menuItemsArr;
      rightMenuArr.value = [];
    }
  }
};

const router = useRouter();
const goHome = () => {
  router.push("/dashboard");
};
const goBack = () => {
  router.go(-1);
};

//传递点击菜单的值
const emits = defineEmits("clickPath");
const menuClick = (path) => {
  emits("clickPath", path);
};

onMounted(() => {
  changeMenuArr();
});
</script>
<style lang="scss" scoped>
.dataScreen-header {
  width: 100%;
  height: 210px;
  background: url("@/assets/screenImg/headImg/headBg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .header-lf,
  .header-rg {
    width: 300px;
    height: 55px;
    background: url("@/assets/screenImg/headImg/sidePic.gif") no-repeat;
    background-size: 100% 100%;
  }
  .header-lf {
    margin-left: 10%;
  }
  .header-rg {
    margin-right: 10%;
  }
  .header-ct {
    .titleBox {
      width: 205px;
      height: 37px;
      margin: 21px auto 8px;
      background-size: 100% 100%;
    }
    .menuBox {
      display: flex;
      justify-content: space-around;
      .menuStyle {
        width: 30%;
        height: 30px;
        display: flex;
        flex-shrink: inherit;
        .menuItem {
          width: 117px;
          margin-right: 30px;
          text-align: center;
          cursor: pointer;
          span {
            line-height: 28px;
            color: #bad0f8;
            display: inline-block;
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
          }
          &:hover {
            box-shadow: inset 6px 0px 19px -2px #ffda3a;
            border: 1px solid #96a542;
            span {
              color: #ffda3a;
              font-family: 'SourceHanSans-BD';
            }
          }
        }
      }
      .menuLeft {
        margin-right: 340px;
        justify-content: right;
        .menuItem {
          transform: skewX(45deg);
          span {
            transform: skewX(-45deg);
          }
        }
      }
      .menuRight {
        justify-content: left;
        .menuItem {
          transform: skewX(135deg);
          span {
            transform: skewX(-135deg);
          }
        }
      }
      .itemBord {
        background: #3f5b8a;
        box-shadow: inset 10px -10px 9px 0px #192549;
        border: 1px solid #6b85b6;
        border-radius: 4px 2px 4px 2px;
      }
    }
    .dbStarBox {
      width: 280px;
      height: 35px;
      margin: -25px auto 0;
      display: flex;
      justify-content: space-around;
      img {
        width: 54px;
        height: 50px;
        opacity: 0.9;
      }
    }
  }
  .ctrBtn {
    position: absolute;
    display: flex;
    left: 60px;
    top: 35px;
    align-items: center;
    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
      &:first-child {
        margin-right: 20px;
      }
      &:last-child {
        margin-top: 4px;
      }
    }
  }
}
</style>
